<!-- src/components/Sidebar.vue -->
<template>
  <div class="sidebar">
    <h2>导航栏</h2>
    <ul>
      <li v-if="userRole === 'admin'"><router-link to="/adminhome">主页</router-link></li>
      <li v-if="userRole === 'user'"><router-link to="/userhome">主页</router-link></li>
      <!-- 工单总览 -->
      <li>
        <div @click="toggleTicketOverview" class="menu-item">
          工单总览
          <span>{{ isTicketOverviewOpen ? '▲' : '▼' }}</span> <!-- 展示展开/折叠图标 -->
        </div>
        <ul v-if="isTicketOverviewOpen" class="submenu">
          <li><router-link to="/incidentoverview">事件-Incident</router-link></li>
          <li><router-link to="/requestoverview">请求-Request</router-link></li>
        </ul>
      </li>
      <!-- 工单总览 -->
      <li>
        <div @click="toggleNewTicket" class="menu-item">
          新建工单
          <span>{{ isNewTicketOpen ? '▲' : '▼' }}</span> <!-- 展示展开/折叠图标 -->
        </div>
        <ul v-if="isNewTicketOpen" class="submenu">
          <li><router-link to="/newincident">新建事件-Incident</router-link></li>
          <li><router-link to="/newrequest">新建请求-Request</router-link></li>
        </ul>
      </li>
      <!-- 工单认领 -->
      <li>
        <div @click="toggleTicketPickUp" class="menu-item">
          工单认领/分配
          <span>{{ isTicketPickUpOpen ? '▲' : '▼' }}</span> <!-- 展示展开/折叠图标 -->
        </div>
        <ul v-if="isTicketPickUpOpen" class="submenu">
          <li><router-link to="/incidentpickup">认领/分配事件-Incident</router-link></li>
          <li><router-link to="/requestpickup">认领/分配请求-Request</router-link></li>
        </ul>
      </li>

      <!-- 我的工单 -->
      <li>
        <div @click="toggleMyTicket" class="menu-item">
          我的工单
          <span>{{ isMyTicketOpen ? '▲' : '▼' }}</span> <!-- 展示展开/折叠图标 -->
        </div>
        <ul v-if="isMyTicketOpen" class="submenu">
          <li><router-link to="/incidentopenedbyme">我创建的事件-Incident</router-link></li>
          <li><router-link to="/requestopenedbyme">我创建的请求-Request</router-link></li>
          <li><router-link to="/incidentassignedtome">分配给我的事件-Incident</router-link></li>
          <li><router-link to="/requestassignedtome">分配给我的请求-Request</router-link></li>
        </ul>
      </li>

      <!-- 工单分析/报表生成 -->
      <li>
        <div @click="toggleTicketAnalysis" class="menu-item">
          工单分析/报表生成
          <span>{{ isTicketAnalysisOpen ? '▲' : '▼' }}</span> <!-- 展示展开/折叠图标 -->
        </div>
        <ul v-if="isTicketAnalysisOpen" class="submenu">
          <li><router-link to="/incidentreportview">事件分析/报告生成-Incident</router-link></li>
          <li><router-link to="/requestreportview">请求分析/报告生成-Request</router-link></li>
          <li><router-link to="/incidentdecisiontree">事件智能分析</router-link></li>

        </ul>
      </li>

      <!-- 用户管理 -->
      <li v-if="userRole === 'admin'">
        <div @click="toggleUserManagement" class="menu-item">
          用户管理
          <span>{{ isUserManagementOpen ? '▲' : '▼' }}</span> <!-- 展示展开/折叠图标 -->
        </div>
        <ul v-if="isUserManagementOpen" class="submenu">
          <li><router-link to="/register">新建用户</router-link></li>
          <li><router-link to="/usertable">用户列表</router-link></li>
          <li><router-link to="/userinfotable">用户信息列表</router-link></li>
        </ul>
      </li>
      <!-- 评论管理 -->
      <li v-if="userRole === 'admin'">
        <div @click="toggleCommentManagement" class="menu-item">
          评论管理
          <span>{{ isCommentManagementOpen ? '▲' : '▼' }}</span> <!-- 展示展开/折叠图标 -->
        </div>
        <ul v-if="isCommentManagementOpen" class="submenu">
          <li><router-link to="/incidentcommenttable">事件评论列表-Incident</router-link></li>
          <li><router-link to="/requestcommenttable">请求评论列表-Request</router-link></li>
        </ul>
      </li>
      <!-- 个人管理 -->
      <li>
        <div @click="togglePersonalManagement" class="menu-item">
          个人管理
          <span>{{ isPersonalManagementOpen ? '▲' : '▼' }}</span> <!-- 展示展开/折叠图标 -->
        </div>
        <ul v-if="isPersonalManagementOpen" class="submenu">
          <li><router-link to="/basicinfo">基本信息</router-link></li>
          <li><router-link to="/passwordchange">修改密码</router-link></li>
        </ul>
      </li>
      <li><router-link to="/about">关于</router-link></li>
      <li v-if="userRole === 'admin'"><router-link to="/insertticket">信息导入</router-link></li>
      <li><router-link to="/contact">联系</router-link></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userRole: '', // 用户角色
      isUserManagementOpen: false, // 用户管理展开状态
      isPersonalManagementOpen: false, // 个人管理展开状态
      isTicketOverviewOpen: false, // 工单总览展开状态
      isMyTicketOpen: false, // 我的工单展开状态
      isTicketAnalysisOpen: false, // 工单分析/报表生成展开状态
      isNewTicketOpen: false, // 新建工单展开状态
      isCommentManagementOpen: false, // 评论管理展开状态
      isTicketPickUpOpen: false, // 工单认领展开状态


      // 其他数据属性...
    };
  },
  created() {
    // 从 localStorage 获取用户角色
    this.userRole = localStorage.getItem('userRole') || ''; // 默认值为空字符串
  },
  methods: {
    toggleUserManagement() {
      this.isUserManagementOpen = !this.isUserManagementOpen; // 切换用户管理的展开状态
      //this.isPersonalManagementOpen = false; // 确保个人管理折叠
    },
    togglePersonalManagement() {
      this.isPersonalManagementOpen = !this.isPersonalManagementOpen; // 切换个人管理的展开状态
      //this.isUserManagementOpen = false; // 确保用户管理折叠
    },
    toggleTicketOverview() {
      this.isTicketOverviewOpen = !this.isTicketOverviewOpen; // 切换工单总览的展开状态
      //this.isTicketOverviewOpen = false; // 确保工单总览折叠

    },
    toggleMyTicket() {
      this.isMyTicketOpen = !this.isMyTicketOpen; // 切换我的工单的展开状态
      //this.isMyTicketOpen = false; // 确保我的工单折叠
    },
    toggleTicketAnalysis() {
      this.isTicketAnalysisOpen = !this.isTicketAnalysisOpen; // 切换工单分析/报表生成的展开状态
      //this.isTicketAnalysisOpen = false; // 确保工单分析/报表生成折叠
    },
    toggleNewTicket() {
      this.isNewTicketOpen = !this.isNewTicketOpen; // 切换新建工单的展开状态
      //this.isNewTicketOpen = false; // 确保新建工单折叠
    },
    toggleCommentManagement() {
      this.isCommentManagementOpen = !this.isCommentManagementOpen; // 切换评论管理的展开状态
      //this.isCommentManagementOpen = false; // 确保评论管理折叠
    },
    toggleTicketPickUp() {
      this.isTicketPickUpOpen = !this.isTicketPickUpOpen; // 切换工单认领的展开状态
      //this.isTicketPickUpOpen = false; // 确保工单认领折叠
    },
  },
};
</script>

<style scoped>
.sidebar {
  width: 200px;
  height: 100vh;
  background-color: #f4f4f4;
  padding: 20px;
  position: fixed;
  overflow-y: auto; /* 添加垂直滚动条 */
}
.sidebar ul {
  list-style-type: none;
  padding: 0;
}
.sidebar li {
  margin: 15px 0;
}
.menu-item {
  cursor: pointer; /* 鼠标指针样式 */
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 使内容两端对齐 */
}
.submenu {
  padding-left: 20px; /* 二级菜单的左侧内边距 */
}
</style>